// miniprogram/devTools/colorui/colorui.js
Page({

  data: {
    singlPage: 0, //单色页码
    morePage: 0, //过渡色页码
    moreLoading: false, //加载更多标识
    hasSingleData: true,
    hasMoreData: true,
    // 颜色数据
    colorArr: [],
    webColorArr: [],
    tabKey: 'single',
    singleColor: '#c1c1c1',
    nbBackground: 'background:#c1c1c1',
    nbBackgroundImage: 'background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);'
  },
  onLoad: function (options) {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          statusBarHeight: res.statusBarHeight
        })
      }
    })
    this.getSingleColorData()
    this.getMoreColorData()
  },
  onShareAppMessage: function () {

  },
  // 获取单色数据
  getSingleColorData() {
    let singlPage = this.data.singlPage
    wx.cloud.database().collection('devTools')
      .aggregate().match({
        title: '中国传统色彩'
      }).unwind('$colorBeans')
      .replaceRoot({
        newRoot: '$colorBeans'
      }).skip(singlPage * 30).limit(30).end()
      .then(res => {
        console.log("getSingleColorData", res)
        let cList = res.list
        if (cList && cList.length > 0) {
          let mColorArr = this.data.colorArr
          let colorArr = mColorArr.concat(cList)
          this.setData({
            colorArr,
            moreLoading: false,
            singlPage: singlPage + 1,
          })
        } else {
          this.setData({
            hasSingleData: false,
            moreLoading: false,
          })
        }
      })
  },
  // 获取渐变颜色数据
  getMoreColorData() {
    let morePage = this.data.morePage
    wx.cloud.database().collection('devTools')
      .aggregate().match({
        title: 'webgradients'
      }).unwind('$colorBeans')
      .replaceRoot({
        newRoot: '$colorBeans'
      }).skip(morePage * 15).limit(15).end()
      .then(res => {
        console.log("getMoreColorData", res)
        let cList = res.list
        if (cList && cList.length > 0) {
          let mColorArr = this.data.webColorArr
          let webColorArr = mColorArr.concat(cList)
          this.setData({
            webColorArr,
            moreLoading: false,
            morePage: morePage + 1,
          })
        } else {
          this.setData({
            hasMoreData: false,
            moreLoading: false,
          })
        }
      })
  },
  // 划动到底部监听
  toBottomListener() {
    let tabKey = this.data.tabKey
    let noSingleData = tabKey === 'single' && !this.data.hasSingleData
    let noMoreData = tabKey === 'more' && !this.data.hasMoreData
    if (noSingleData || noMoreData) {
      wx.showToast({
        title: '暂无更多数据',
        icon: 'none'
      })
      return
    }
    this.setData({
      moreLoading: true
    })
    setTimeout(() => {
      if (tabKey === 'single')
        this.getSingleColorData()
      else
        this.getMoreColorData()
    }, 1000)
  },
  //返回按钮监听
  onBackClick() {
    wx.navigateBack({
      complete: (res) => {}
    })
  },
  // tab标签点击监听
  onTabClick(e) {
    let tabKey = e.currentTarget.dataset.key
    this.setData({
      tabKey
    })
  },
  // 单色item点击监听
  onColorItemClick(e) {
    console.log(e)
    var index = e.currentTarget.dataset.idx
    var value = e.currentTarget.dataset.value
    let nbBackground = `background:${value}`
    console.log(index, value)
    this.setData({
      selectIndex: index,
      singleColor: value,
      nbBackground
    })
  },
  // 过渡色item点击监听
  onColorMoreItemClick(e) {
    console.log(e)
    var index = e.currentTarget.dataset.idx
    var colorText = e.currentTarget.dataset.value
    console.log(index, colorText)
    this.setData({
      selectIndexMore: index,
      nbBackgroundImage: colorText
    })
  },
  // 复制文字监听
  copyText: function (e) {
    // console.log(e)
    let text = e.currentTarget.dataset.text
    if (typeof text == 'object')
      text = text[0]
    console.log("copyText", text)
    wx.setClipboardData({
      data: text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功',
              icon: 'none'
            })
          }
        })
      }
    })
  },
})